<template>
  <div class="main">
    <div class="header">
      <topheader>
        <template v-slot:nameCN>模型集成管理模型集成管理模型集成管理</template>
        <template v-slot:nameEN>Model integration management</template>
        <template v-slot:centerContent>
          <div class="menu">
            <topmenu @watchIframeFn="watchIframeFn" />
          </div>
        </template>
      </topheader>
    </div>
    <div class="content">
      <div class="info">
        <!-- iframe的处理 -->
        <div
          class="ifarme-div"
          v-show="$store.state.showItemObj.link"
          v-loading="!loadingFlag"
        >
          <iframe
            :src="$store.state.showItemObj.link"
            frameborder="0"
            id="ifarmeDiv"
            class="ifarme-item"
          ></iframe>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import topheader from "../../components/tophearder";
import topmenu from "./components/topMenu";
export default {
  data() {
    return {
      currentArr: [],
      showArrIndex: null,
      loadingFlag: false,
      showLeftBoxFlag: false,
      showRightBoxFlag: false,
    };
  },
  components: {
    topheader,
    topmenu,
  },
  mounted() {
    this.watchIframeFn();
  },
  methods: {
    // 监听iframe是否加载完毕
    watchIframeFn() {
      var that = this;
      const iframe = document.querySelector("#ifarmeDiv");
      // 处理兼容行问题
      if (iframe.attachEvent) {
        iframe.attachEvent("onload", function () {
          // iframe加载完毕以后执行操作
          that.loadingFlag = true;
        });
      } else {
        iframe.onload = function () {
          // iframe加载完毕以后执行操作
          that.loadingFlag = true;
        };
      }
    },
  },
};
</script>
<style scoped lang="scss">
.main {
  flex: 0 0 100%;
  width: 100%;
  background-color: #f3f5fa;
  display: flex;
  flex-direction: column;
  align-items: center;
  .header {
    width: 100%;
    flex: 0 0 60px;
    height: 60px;
    position: relative;
    z-index: 9;
  }
  .content {
    width: 100%;
    flex: 1 1 auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    .info {
      width: 100%;
      flex: 1 1 auto;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      position: relative;
      align-items: center;
      .ifarme-div {
        width: 100%;
        height: 100%;
        .ifarme-item {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
